<template>
  <div class="container">
    <div class="main">
      <div class="header">
        <div class="title">智慧航道</div>
      </div>
      <div class="content">
        <div class="left-content">
          <div class="item">
            <div class="top">
              <div style="display: flex">
                <div class="title" @click="changeActive1('航道概况')">
                  航道概况
                </div>
                <!-- <div class="title" :class="isActive1 === '行政审批'?'active':''" @click="changeActive1('行政审批')">行政审批</div>
                <div class="title" :class="isActive1 === '航道检查'?'active':''" @click="changeActive1('航道检查')">航道检查</div>
                <div class="title" :class="isActive1 === '基础信息'?'active':''" @click="changeActive1('基础信息')">基础信息</div> -->
              </div>
              <div class="more" @click="isShowMore1 = !isShowMore1" v-show="isActive1 === '航道概况'">
                {{ isShowMore1 === false ? "查看更多 >>" : "返回 >>" }}
              </div>
            </div>
            <div v-show="isActive1 === '航道概况'">
              <div v-show="isShowMore1 === false" class="content">
                <!-- <div class="count">
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hd-one.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">航道总里程</div>
                      <div class="value">
                        {{
                          waterWayData.totalMileageOfWaterwayInTheProvince ||
                          "--"
                        }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hd-two.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">内河航道里程</div>
                      <div class="value">
                        {{ waterWayData.mileageOfInlandWaterway || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hd-three.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">沿海航道里程</div>
                      <div class="value">
                        {{ waterWayData.mileageOfCoastalWaterwayTotal || "--" }}
                      </div>
                    </div>
                  </div>
                </div> -->
                <!-- <div class="subtitle" style="width: 389px; margin-bottom: 16px">
                  各辖区内河等级航道维护里程分布图
                </div> -->
                <!-- <div id="first-chart" style="height: 240px; width: 100%"></div> -->
                <div class="item-left">
                  <div class="one">
                    <div class="title">航道总里程(公里)</div>
                    <div class="value">
                      {{
                        waterWayData.totalMileageOfWaterwayInTheProvince || "--"
                      }}
                    </div>
                  </div>
                  <div class="one">
                    <div class="title">内河航道里程(公里)</div>
                    <div class="value">
                      {{ waterWayData.mileageOfInlandWaterway || "--" }}
                    </div>
                  </div>
                  <div class="one">
                    <div class="title">沿海航道里程(公里)</div>
                    <div class="value">
                      {{ waterWayData.mileageOfCoastalWaterwayTotal || "--" }}
                    </div>
                  </div>
                </div>
                <div class="item-right">
                  <div class="item-top">各辖区内河等级航道维护里程分布</div>
                  <div id="first-chart" style="height: 360px; width: 100%"></div>
                </div>
              </div>
              <div v-show="isShowMore1 === true">
                <div class="subtitle" style="width: 360px; margin-top: 24px">
                  各辖区内河等级航道维护里程详情
                </div>
                <div class="my-table">
                  <el-table :data="nhdjhdDetail" style="width: 100%" height="340">
                    <el-table-column prop="region" label="" />
                    <el-table-column prop="total" label="总计" />
                    <el-table-column prop="v1" label="一级" />
                    <el-table-column prop="v2" label="二级" />
                    <el-table-column prop="v3" label="三级" />
                    <el-table-column prop="v4" label="四级" />
                    <el-table-column prop="v5" label="五级" />
                    <el-table-column prop="v6" label="六级" />
                    <el-table-column prop="v7" label="七级" />
                  </el-table>
                </div>
              </div>
            </div>
            <div v-show="isActive1 === '行政审批'">
              <div class="subtitle" style="width: 260px; margin-top: 24px">
                行政许可审批信息分析
              </div>
              <div class="my-table">
                <el-table :data="adminApprovalData" style="width: 100%" height="340">
                  <el-table-column prop="childName" label="行政申请事项名称" />
                  <el-table-column prop="updateTime" label="申请时间" />
                  <el-table-column prop="applyOrgName" label="申请主体" />
                  <el-table-column label="审批状态">
                    <template #default="scope">
                      <div v-if="scope.row.status == 0">待补正</div>
                      <div v-else-if="scope.row.status == 1">未受理</div>
                      <div v-else-if="scope.row.status == 2">审查中</div>
                      <div v-else-if="scope.row.status == 3">审批中</div>
                      <div v-else-if="scope.row.status == 4">待批复</div>
                      <div v-else-if="scope.row.status == 5">已办结</div>
                      <div v-else>--</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div v-show="isActive1 === '航道检查'">
              <div class="subtitle" style="width: 210px; margin-top: 24px">
                行政检查信息分析
              </div>
              <div class="my-table">
                <el-table :data="channelCheckData" style="width: 100%" height="340">
                  <el-table-column prop="xcsj" label="巡查时间" />
                  <el-table-column prop="xcry" label="巡查人员" />
                  <el-table-column prop="xchdmc" label="巡查航道名称" width="120" />
                  <el-table-column prop="dwmc" label="单位名称" />
                  <el-table-column prop="hdzt" label="航道状态" />
                  <el-table-column prop="xczt" label="巡查状态" />
                  <el-table-column prop="xcjg" label="巡查结果" />
                  <el-table-column prop="scxcsj" label="上次巡查时间" width="120" />
                </el-table>
              </div>
            </div>
            <div v-show="isActive1 === '基础信息'">
              <div class="subtitle" style="width: 210px; margin-top: 24px">
                航道基础信息分析
              </div>
              <div class="my-table">
                <el-table :data="channelBaseData" style="width: 100%" height="340">
                  <el-table-column prop="hdbm" label="航道编码" />
                  <el-table-column prop="hdmc" label="航道名称" />
                  <el-table-column prop="hddj" label="航道等级" />
                  <el-table-column prop="hdwz" label="航道位置" />
                  <el-table-column prop="hdzt" label="航道状态" />
                  <el-table-column prop="hdsx" label="航道属性" />
                  <el-table-column prop="hdkd" label="航道宽度" />
                  <el-table-column prop="hdsd" label="航道深度" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div style="display: flex">
                <div class="title" @click="changeActive2('航标概况')">
                  航标概况
                </div>
                <!-- <div class="title" :class="isActive2 === '基础数据'?'active':''" @click="changeActive2('基础数据')">基础数据</div> -->
              </div>
              <div class="more" @click="isShowMore2 = !isShowMore2" v-show="isActive2 === '航标概况'">
                {{ isShowMore2 === false ? "查看更多 >>" : "返回 >>" }}
              </div>
            </div>
            <div v-show="isActive2 === '航标概况'">
              <div v-show="isShowMore2 === false" class="content">
                <!-- <div class="count">
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hb-one.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">航标总数</div>
                      <div class="value">
                        {{ navigationMarkData.beaconSum }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hb-two.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">内河航标总数</div>
                      <div class="value">
                        {{ navigationMarkData.nhBeaconSum }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item">
                    <div class="icon">
                      <img src="../assets/images/large-screen/hb-three.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">沿海航标总数</div>
                      <div class="value">
                        {{ navigationMarkData.yhBeaconSum }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="subtitle" style="width: 347px; margin-bottom: 16px">
                  各区域中心遥测遥控航标分布图
                </div>
                <div id="second-chart" style="height: 240px; width: 100%"></div> -->
                <div class="item-left">
                  <div class="one">
                    <div class="title">航标总数</div>
                    <div class="value">
                      {{ navigationMarkData.beaconSum || "--" }}
                    </div>
                  </div>
                  <div class="one">
                    <div class="title">内河航标总数</div>
                    <div class="value">
                      {{ navigationMarkData.nhBeaconSum || "--" }}
                    </div>
                  </div>
                  <div class="one">
                    <div class="title">沿海航标总数</div>
                    <div class="value">
                      {{ navigationMarkData.yhBeaconSum || "--" }}
                    </div>
                  </div>
                </div>
                <div class="item-right">
                  <div class="item-top">各区域中心遥测遥控航标分布图</div>
                  <div id="second-chart" style="height: 360px; width: 100%"></div>
                </div>
              </div>
              <div v-show="isShowMore2 === true">
                <div class="more-count">
                  <div class="more-count-item" style="margin-right: 26px">
                    <div class="name">
                      <div>遥测遥控航标总数</div>
                    </div>
                    <div class="value">
                      {{ navigationMarkData.departmentRtuBeaconSum }}
                    </div>
                  </div>
                  <div class="more-count-item" style="margin-right: 26px">
                    <div class="name">
                      <div>内河遥测遥控航标总数</div>
                    </div>
                    <div class="value">
                      {{ navigationMarkData.departmentInlandRiverRtuBeaconSum }}
                    </div>
                  </div>
                  <div class="more-count-item" style="margin-right: 26px">
                    <div class="name">
                      <div>沿海遥测遥控航标总数</div>
                    </div>
                    <div class="value">
                      {{ navigationMarkData.departmentCoastalAreaRtuBeaconSum }}
                    </div>
                  </div>
                </div>
                <div class="subtitle-other" style="width: 312px">
                  各区域中心遥测遥控航标详情
                </div>
                <div class="table large-screen">
                  <el-table :data="secondTableList" style="width: 80%" height="332">
                    <el-table-column prop="region" label="区域中心" />
                    <el-table-column prop="rtuBeacon" label="遥测遥控航标数" />
                  </el-table>
                </div>
              </div>
            </div>
            <div v-show="isActive2 === '基础数据'">
              <div class="subtitle" style="width: 210px; margin-top: 24px">
                航标基础信息分析
              </div>
              <div class="my-table">
                <el-table :data="pharosBaseData" style="width: 100%" height="340">
                  <el-table-column prop="hbbm" label="航标编号" />
                  <el-table-column prop="hblx" label="航标类型" />
                  <el-table-column prop="hdmc" label="所在航道" />
                  <el-table-column prop="alarm" label="状态类型" />
                  <el-table-column prop="hbwz" label="航标位置" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div style="display: flex">
                <div class="title" @click="changeActive3('智慧船闸')">
                  智慧船闸
                </div>
                <!-- <div class="title" :class="isActive3 === '基础数据'?'active':''" @click="changeActive3('基础数据')">基础数据</div> -->
              </div>
              <div class="more" @click="isShowMore3 = !isShowMore3" v-show="isActive3 === '智慧船闸'">
                {{ isShowMore3 === false ? "查看更多 >>" : "返回 >>" }}
              </div>
            </div>
            <div v-show="isActive3 === '智慧船闸'">
              <div v-show="isShowMore3 === false">
                <!-- <div class="count">
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/zh-one.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">全省船闸总数</div>
                      <div class="value">
                        {{ shipLockData.shipLockSum || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item" style="margin-right: 26px">
                    <div class="icon">
                      <img src="../assets/images/large-screen/zh-two.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">航道部门维护船闸数</div>
                      <div class="value">
                        {{ shipLockData.departmentShipLockSum || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="count-item">
                    <div class="icon">
                      <img src="../assets/images/large-screen/zh-three.png" alt="" />
                    </div>
                    <div class="info">
                      <div class="name">其他部门维护船闸数</div>
                      <div class="value">
                        {{ shipLockData.localUnitShipLockSum || "--" }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="pie-content">
                  <div class="pie-item">
                    <div class="title" style="width: 271px">
                      船闸维护所属航道部门
                    </div>
                    <div id="third-chart" style="height: 240px; width: 100%"></div>
                  </div>
                  <div class="pie-item">
                    <div class="title" style="width: 186px">过闸货源分析</div>
                    <div id="fourth-chart" style="height: 240px; width: 100%"></div>
                  </div>
                </div> -->
                <div class="m-top">
                  <div class="item-a">
                    <div class="img">
                      <img src="../assets/images/large-screen/icon_qsczs.png" alt="" />
                    </div>
                    <div class="right">
                      <div class="title">全省船闸数</div>
                      <div class="value">
                        {{ shipLockData.shipLockSum || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="item-a">
                    <div class="img">
                      <img src="../assets/images/large-screen/icon_hdbmwhczs.png" alt="" />
                    </div>
                    <div class="right">
                      <div class="title">航道部门维护船闸数</div>
                      <div class="value">
                        {{ shipLockData.departmentShipLockSum || "--" }}
                      </div>
                    </div>
                  </div>

                  <div class="item-a">
                    <div class="img">
                      <img src="../assets/images/large-screen/icon_qtbmwhczs.png" alt="" />
                    </div>
                    <div class="right">
                      <div class="title">其他部门维护船闸数</div>
                      <div class="value">
                        {{ shipLockData.localUnitShipLockSum || "--" }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="m-buttom">
                  <div class="m-item">
                    <div class="title">船闸维护所属航道部门</div>

                    <div id="third-chart" style="width: 100%; height: 300px"></div>
                  </div>
                  <div class="m-item">
                    <div class="title">过闸货源分析</div>
                    <div id="fourth-chart" style="width: 100%; height: 300px"></div>
                  </div>
                </div>
              </div>
              <div v-show="isShowMore3 === true">
                <div class="choice">
                  <div class="tab">
                    <div class="btn" :class="currentTab === 1 ? 'active' : ''" @click="currentTabChange(1)">
                      北江船闸累计过货趋势图
                    </div>
                    <div class="btn" :class="currentTab === 2 ? 'active' : ''" @click="currentTabChange(2)">
                      北江船闸累计过闸趋势图
                    </div>
                  </div>
                  <div class="year">
                    <template v-if="currentTab === 1">
                      <el-select v-model="goodsYear1" placeholder="开始年份1" @click="oldGoodsYear1 = goodsYear1"
                        @change="goodsYear1Change()" style="width: 100px">
                        <el-option v-for="item in goodsFirstYearList" :key="item" :label="item" :value="item" />
                      </el-select>
                      <span class="vs">VS</span>
                      <el-select v-model="goodsYear2" placeholder="结束年份" @click="oldGoodsYear2 = goodsYear2"
                        @change="goodsYear2Change()" style="width: 100px">
                        <el-option v-for="item in goodsSecondYearList" :key="item" :label="item" :value="item" />
                      </el-select>
                    </template>
                    <template v-if="currentTab === 2">
                      <el-select v-model="sluiceYear1" placeholder="开始年份2" @click="oldSluiceYear1 = sluiceYear1"
                        @change="sluiceYear1Change" style="width: 100px">
                        <el-option v-for="item in sluiceFirstYearList" :key="item" :label="item" :value="item" />
                      </el-select>
                      <span class="vs">VS</span>
                      <el-select v-model="sluiceYear2" placeholder="结束年份" @click="oldSluiceYear2 = sluiceYear2"
                        @change="sluiceYear2Change" style="width: 100px">
                        <el-option v-for="item in sluiceSecondYearList" :key="item" :label="item" :value="item" />
                      </el-select>
                    </template>
                  </div>
                </div>
                <div id="fifth-chart" style="width: 804px; height: 190px"></div>
                <div class="subtitle-small" style="width: 188px; margin-top: 20px">
                  船闸过闸详情
                </div>
                <div class="my-table">
                  <el-table :data="shipLockTableData" style="width: 100%" height="90">
                    <el-table-column prop="shipLockName" label="船闸名称" width="180" />
                    <el-table-column prop="cumulativeOverLoadedTon" label="累计过货（吨）" width="180" />
                    <el-table-column prop="passShipLockNum" label="过闸船舶总数（艘）" width="180" />
                    <el-table-column prop="upCount" label="累计上行数量（艘）" width="180" />
                    <el-table-column prop="downCount" label="累计下行数量（艘）" width="180" />
                    <el-table-column prop="averageTimePass" label="平均过闸时间（分）" width="180" />
                  </el-table>
                </div>
              </div>
            </div>
            <div v-show="isActive3 === '基础数据'">
              <div class="subtitle" style="width: 210px; margin-top: 24px">
                船闸基础信息分析
              </div>
              <div class="my-table">
                <el-table :data="lockBaseData" style="width: 100%" height="340">
                  <el-table-column prop="czbh" label="船闸编号" />
                  <el-table-column prop="czmc" label="船闸名称" />
                  <el-table-column prop="szhd" label="所在航道" />
                  <el-table-column prop="szwz" label="所在位置" />
                  <el-table-column prop="ccgg" label="尺寸规格" />
                  <el-table-column prop="czjb" label="船闸等级" />
                  <el-table-column prop="czlx" label="船闸类型" />
                  <el-table-column prop="dqzt" label="当前状态" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div class="title">船舶概览</div>
              <div class="more" @click="isShowMore4 = !isShowMore4">
                {{ isShowMore4 === false ? "查看更多 >>" : "返回 >>" }}
              </div>
            </div>
            <div v-show="isShowMore4 === false">
              <!-- <div class="single-count">
                <div class="left">
                  <div class="icon">
                    <img src="../assets/images/large-screen/cbgl.png" alt="" />
                  </div>
                  <div class="name">航道管理工作船舶数量</div>
                </div>
                <div class="value">{{ departWorkShipNum || "--" }}</div>
              </div> -->
              <div class="work">
                航道管理工作船舶数量<span>{{ departWorkShipNum || "--" }}</span>
              </div>
              <div class="subtitle" style="width: 347px; margin-bottom: 16px">
                各区域中心管理工作船舶分布图
              </div>
              <div id="sixth-chart" style="height: 280px; width: 100%"></div>
            </div>
            <div v-show="isShowMore4 === true">
              <div class="subtitle-small" style="width: 184px; margin-top: 20px">
                地市船舶情况
              </div>
              <div id="seventh-chart" style="height: 180px; width: 804px"></div>
              <div class="subtitle" style="width: 328px; margin-top: 20px">
                各区域中心管理工作船舶详情
              </div>
              <div class="my-table">
                <el-table :data="sixthTableList" style="width: 100%" height="120">
                  <el-table-column prop="name" label="区域中心" />
                  <el-table-column prop="value" label="工作船舶数量(艘)" />
                </el-table>
              </div>
            </div>
          </div>
        </div>
        <div class="centre-content">
          <OlArc ref="OlArcRef"></OlArc>
          <div class="static">
            <div class="s-item">
              <div class="img">
                <img src="../assets/images/large-screen/icon_hdzlc.png" alt="" />
              </div>
              <div class="right">
                <div class="title">航道总里程(公里)</div>
                <div class="value">
                  {{ provinceWaterwayData.totalMileageOfWaterwayProvince }}
                </div>
              </div>
            </div>
            <div class="s-item">
              <div class="img">
                <img src="../assets/images/large-screen/icon_hbzs.png" alt="" />
              </div>
              <div class="right">
                <div class="title">航标总数(座)</div>
                <div class="value">
                  {{ provinceWaterwayData.totalNumNavigationMarks }}
                </div>
              </div>
            </div>

            <div class="s-item">
              <div class="img">
                <img src="../assets/images/large-screen/icon_czzs.png" alt="" />
              </div>
              <div class="right">
                <div class="title">船闸总数(座)</div>
                <div class="value">
                  {{ provinceWaterwayData.totalNumLocks }}
                </div>
              </div>
            </div>
          </div>
          <div class="zx">
            <div class="img">
              <img src="../assets/images/large-screen/icon_qyzx.png" alt="" />
            </div>
            <div class="value">区域中心</div>
          </div>
          <!-- <div class="statistics">
            <div class="list">
              <div class="item">
                <div class="name">
                  <img src="../assets/images/large-screen/hdzlc.png" alt="" />
                  <div>航道总里程(公里)</div>
                </div>
                <div class="value">
                  {{ provinceWaterwayData.totalMileageOfWaterwayProvince }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img src="../assets/images/large-screen/hbzs.png" alt="" />
                  <div>航标总数(座)</div>
                </div>
                <div class="value">
                  {{ provinceWaterwayData.totalNumNavigationMarks }}
                </div>
              </div>
              <div class="item">
                <div class="name">
                  <img src="../assets/images/large-screen/czzs.png" alt="" />
                  <div>船闸总数(座)</div>
                </div>
                <div class="value">
                  {{ provinceWaterwayData.totalNumLocks }}
                </div>
              </div>
            </div>
            <div class="point-out">
              <div class="name">区域中心</div>
              <img src="../assets/images/big-screen/map-one.png" alt="" />
            </div> -->
          <!-- <div class="point-out">
              <div class="name">通航净高不达标桥梁</div>
              <img src="../assets/images/big-screen/jg-budabiao.png" alt="">
            </div>
            <div class="point-out">
              <div class="name">通航净高达标桥梁</div>
              <img src="../assets/images/big-screen/jg-dabiao.png" alt="">
            </div>
            <div class="point-out">
              <div class="name">遥测遥控航标正常</div>
              <img src="../assets/images/big-screen/hangbiao-zc.png" alt="">
            </div>
            <div class="point-out">
              <div class="name">遥测遥控航标异常</div>
              <img src="../assets/images/big-screen/hangbiao-yc.png" alt="">
            </div>
            <div class="point-out">
              <div class="name">AIS船舶</div>              
              <img src="../assets/images/big-screen/ais.png" alt="">
            </div> -->
        </div>
        <!-- <div class="filter">
            <div class="filter-title" @click="isShowFilter = !isShowFilter">
              <div>筛选</div>
              <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter">
              <img src="../assets/images/big-screen/icon-zhankai.png" v-else>
            </div>
            <div v-show="isShowFilter"> 
              <div class="filter-item">
                <el-checkbox
                  v-model="checkAll1"
                  :indeterminate="isIndeterminate1"
                  @change="handleCheckAllChange1"
                >
                  通航净高达标情况
                </el-checkbox>
                <el-checkbox-group
                  v-model="checkedValues1"
                  @change="handleCheckedChange1"
                  style="display: flex;flex-direction: column;margin-left: 20px;"
                >
                  <el-checkbox
                    v-for="item in options1"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="filter-item">
                <el-checkbox
                  v-model="checkAll2"
                  :indeterminate="isIndeterminate2"
                  @change="handleCheckAllChange2"
                >
                  遥测遥控航标
                </el-checkbox>
                <el-checkbox-group
                  v-model="checkedValues2"
                  @change="handleCheckedChange2"
                  style="display: flex;flex-direction: column;margin-left: 20px;"
                >
                  <el-checkbox
                    v-for="item in options2"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="filter-item">
                <el-checkbox
                  v-model="ais"   
                  @change="handleFilter"           
                >
                  AIS船舶
                </el-checkbox>
              </div>
            </div>
          </div> -->
        <!-- </div> -->
        <div class="right-content">
          <div class="item">
            <div class="top">
              <div class="title" style="display: flex; align-items: center">
                <div>桥梁净高监测</div>
                <el-select v-model="bridge" filterable placeholder="请选择" @change="changeBridge"
                  style="margin-left: 28px" v-if="isShowMore5 === true">
                  <el-option v-for="item in bridgeData" :key="item.bridgeName" :label="item.bridgeName"
                    :value="item.bridgeName" />
                </el-select>
              </div>
              <div class="more" @click="isShowMore5 = !isShowMore5">
                {{ isShowMore5 === false ? "查看更多 >>" : "返回 >>" }}
              </div>
            </div>
            <div v-show="isShowMore5 === false">
              <!-- <div class="count">
                <div class="count-item" style="margin-right: 28px">
                  <div class="icon">
                    <img src="../assets/images/large-screen/ql-one.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">内河等级航道桥梁数量</div>
                    <div class="value">{{ departBridgeTotal || "--" }}</div>
                  </div>
                </div>
                <div class="count-item">
                  <div class="icon">
                    <img src="../assets/images/large-screen/ql-two.png" alt="" />
                  </div>
                  <div class="info">
                    <div class="name">已安装终端净高的桥梁数 (座)</div>
                    <div class="value">
                      {{ clearHeightBridgeInstallSum || "--" }}
                    </div>
                  </div>
                </div>
              </div> -->
              <div class="ql-top">
                <div class="value">
                  内河等级航道桥梁数量<span>{{
                    departBridgeTotal || "--"
                  }}</span>
                </div>
                <div class="value">
                  已安装终端净高的桥梁数(座)<span>{{
                    clearHeightBridgeInstallSum || "--"
                  }}</span>
                </div>
              </div>
              <div class="subtitle" style="width: 392px">
                各区域中心内河等级航道桥梁分布图
              </div>
              <div id="eighth-chart" style="height: 300px; width: 100%"></div>
            </div>
            <div v-show="isShowMore5 === true">
              <div class="count">
                <div class="count-item" style="margin-right: 28px">
                  <div class="icon">
                    <img src="../assets/images/large-screen/slices.png" alt="" />
                  </div>
                  <div class="info">

                    <div class="value">{{ upClearHeight }} <br>
                      <div class="unit">(m)</div>
                      <div class="name">通航孔净高值</div>
                    </div>
                  </div>
                </div>
                <div class="bridge-image" v-if="bridgeImage">
                  <img :src="`${baseApi}${bridgeImage}`" @error="
                      (e) => {
                        e.target.src = errorImg;
                      }
                    " />
                </div>
              </div>
              <!-- <div class="bridge-info">
                <div class="info-item">
                  <div class="name">桥梁编号</div>
                  <div class="value">{{ clearHeightTrendChartStaticData[0]?.ql_bh }}</div>
                </div>
                <div class="info-item">
                  <div class="name">桥梁类型</div>
                  <div class="value">{{ clearHeightTrendChartStaticData[0]?.c_bridgelx }}</div>
                </div>
                <div class="info-item">
                  <div class="name">所在位置</div>
                  <div class="value">{{ clearHeightTrendChartStaticData[0]?.c_address }}</div>
                </div,
                <div class="info-item">
                  <div class="name">所在航道</div>
                  <div class="value">{{ clearHeightTrendChartStaticData[0]?.wateway }}</div>
                </div>
              </div> -->
              <div class="subtitle" style="width: 248px">
                净高值历史监测情况
              </div>
              <div id="ninth-chart" style="height: 260px; width: 804px,margin-top: -12px;"></div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div style="display: flex">
                <div class="title" @click="changeActive4('水位监测')">
                  水位监测
                </div>
                <!-- <div class="title" :class="isActive4 === '流速流量'?'active':''" @click="changeActive4('流速流量')">流速流量</div> -->
              </div>
              <!-- <el-select
                v-model="waterStation"
                filterable
                placeholder="请选择"
                @change="changeWaterStation"
                style="margin-right: 16px"
                v-show="isActive4 === '水位监测'"
              >
                <el-option
                  v-for="item in waterStationData"
                  :key="item.monitorStation"
                  :label="item.monitorStation"
                  :value="item.monitorStation"
                />
              </el-select> -->
            </div>
            <div v-show="isActive4 === '水位监测'">
              <div class="work">
                水位检测站数量<span>{{ waterlevelStationSum || "--" }}</span>
              </div>
              <!-- <div class="single-count">
                <div class="left">
                  <div class="icon">
                    <img
                      src="../assets/images/large-screen/sw-one.png"
                      alt=""
                    />
                  </div>
                  <div class="name">水位检测站数量</div>
                </div>
                <div class="value">{{ waterlevelStationSum || "--" }}</div>
              </div> -->

              <div style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                " class="sw">
                <div class="subtitle-small" style="width: 192px">
                  水位检测趋
                </div>
                <div class="value">所在航道：{{ hangdao }}</div>
              </div>
              <div id="tenth-chart" style="height: 320px; width: 100%"></div>
            </div>
            <div v-show="isActive4 === '流速流量'">
              <div class="subtitle-small" style="width: 210px; margin-top: 24px">
                流速流量信息分析
              </div>
              <div class="my-table">
                <el-table :data="lslxStaticData" style="width: 100%" height="340">
                  <el-table-column prop="cHangdmc" label="所在航段" />
                  <el-table-column prop="speed" label="最大流速" />
                  <el-table-column prop="flow" label="流量" />
                  <el-table-column prop="qylx" label="区域类型" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div class="title">视频监控</div>
            </div>
            <div class="video-content">
              <div class="video-count">
                <div class="count-item" style="margin-bottom: 22px">
                  <img src="../assets/images/large-screen/icon_yjrczsp.png" alt="" />
                  <div class="name">已接入船闸视频</div>
                  <div class="value">{{ videoNumObj.chuanzhaNum }}</div>
                </div>
                <div class="count-item">
                  <img src="../assets/images/large-screen/icon_yjrsssp.png" alt="" />
                  <div class="name">已接入水上视频</div>
                  <div class="value">{{ videoNumObj.shuimianNum }}</div>
                </div>
              </div>
              <div class="video-details">
                <div class="video-list">
                  <el-select v-model="videoType" @change="videoTypeChange" style="width: 48%">
                    <el-option v-for="item in videoTypeList" :key="item.name" :label="item.name" :value="item.name" />
                  </el-select>
                  <el-tree-select v-model="currentVideo" :data="videoCategoryData" :props="{
                      children: 'children',
                      label: 'name',
                      value: 'id',
                    }" node-key="id" :render-after-expand="false" @node-click="handleNodeClick" style="width: 48%" />
                </div>
                <div class="video">
                  <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered"
                    style="object-fit: fill; width: 100%; height: 100%"></video>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="top">
              <div class="title">航道通告</div>
            </div>
            <div class="notice" v-for="(item, index) in noticeData" :key="index">
              <div @click="handleClick(item.linkurl)">
                <div class="title">{{ item.title }}</div>
                <div class="bottom">
                  <div class="source">来源：{{ item.source }}</div>
                  <div class="release-time">发布时间：{{ item.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import errorImg from "@/assets/images/big-screen/no-data.png";
import { ElMessage } from "element-plus";
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  DataZoomComponent,
} from "echarts/components";
import { LabelLayout } from "echarts/features";
import { BarChart, LineChart, PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer,
  DataZoomComponent,
  LabelLayout,
]);

import videojs from "video.js";
import "video.js/dist/video-js.css";
//引入中文插件
import VideojsZhcnLanguage from "video.js/dist/lang/zh-CN.json";
videojs.addLanguage("zh-CN", VideojsZhcnLanguage);

//引入接口
import {
  //全省数据
  getProvinceWaterwayData,
  //航道概况
  getWaterwayTotalNum,
  getnhdjhdDetail,
  //航标概况
  beaconSituationDetail,
  rtuBeaconChart,
  //智慧船闸
  getShipLockNum,
  getShipLockRate,
  goodsAnalysisChart,
  getYearList,
  analysisData,
  getShipLockDetail,
  //船舶概览
  getShipsituationSum,
  regionDistributionChart,
  getShipNum,
  //桥梁净高监测
  regionChart,
  clearHeightDetail,
  getAllBridge,
  clearHeightTrendChart,
  //水位监测详情
  waterlevelDetail,
  getWaterStation,
  trendChart,
  //视频监控
  getVideoNum,
  videoCategory,
  playVideo,
  //航道通告
  getWaterwayNoticeThree,

  //行政审批
  adminApproval,
  //航道检查
  channelCheck,
  //航道基础数据
  channelBase,
  //航标基础数据
  pharosBase,
  //智慧船闸基础数据
  lockBase,
  //桥梁动态通航净高数据
  clearHeightTrendChartStatic,
  //流量流速
  lslxStatic,
  //警戒水位
  warnWaterLevel,
} from "@/bridge-h5/utils/apis";

//地图
import OlArc from "../components/olArc.vue";
const OlArcRef = ref(null);

//全省数据
const provinceWaterwayData = ref({});
const getProvinceWaterwayDataFn = () => {
  getProvinceWaterwayData().then((res) => {
    if (res.code === 200 && res.data.length) {
      provinceWaterwayData.value = res.data[0];
    }
  });
};

//航道概况
const isShowMore1 = ref(false);
const waterWayData = ref({});
const getWaterwayTotalNumFn = () => {
  getWaterwayTotalNum().then((res) => {
    if (res.code === 200 && res.data) {
      waterWayData.value = res.data[0];
    }
  });
};
const nhdjhdDetail = ref([]);
const regionalCenter = ref([]);
const levelOne = ref([]);
const levelTwo = ref([]);
const levelThree = ref([]);
const levelFour = ref([]);
const levelFive = ref([]);
const levelSix = ref([]);
const levelSeven = ref([]);
const regionalLevelNum = ref([]);
const getnhdjhdDetailFn = () => {
  getnhdjhdDetail().then((res) => {
    if (res.code === 200 && res.data) {
      let resData = res.data;
      let obj = {};
      resData.forEach((el, index) => {
        if (el.region === "总计") {
          obj = el;
          resData.splice(index, 1);
        }
        if (el.region !== "总计") {
          regionalCenter.value.push(el.region);
        }

        levelOne.value.push(el.v1);
        levelTwo.value.push(el.v2);
        levelThree.value.push(el.v3);
        levelFour.value.push(el.v4);
        levelFive.value.push(el.v5);
        levelSix.value.push(el.v6);
        levelSeven.value.push(el.v7);
        el.total = el.v1 + el.v2 + el.v3 + el.v4 + el.v5 + el.v6 + el.v7;
      });
      resData.unshift(obj);
      nhdjhdDetail.value = resData;

      initFirstChart();
    }
  });
};
const initFirstChart = () => {
  let firstChart = echarts.getInstanceByDom(
    document.getElementById("first-chart")
  );
  if (firstChart != null && firstChart != "" && firstChart != undefined) {
    firstChart.dispose();
  }
  firstChart = echarts.init(document.getElementById("first-chart"));
  let option;
  option = {
    tooltip: {
      // trigger: "axis",
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 6, // 设置图例项的宽度
      itemHeight: 6, // 设置图例项的高度
      textStyle: {
        fontSize: 16,
        color: "rgba(255,255,255,0.85)",
        lineHeight: 16,
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
        padding: [0, 0, -2, 0],
      },
      itemGap: 10,
      // icon: "circle", //图例设置成圆形
      icon: "rect", //图例设置成正方形
      top: "5%",
      right: "5%",
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 12,
        // startValue: 0,
        // endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        name: "区域\n中心",
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255,255,255,0.65)",
        },
        data: regionalCenter.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          color: "#FFFFFF",
          margin: 12,
          align: 'center',
          // interval: 0,
          // formatter: function (value) {
          //   //x轴的文字改为竖版显示
          //   var str = value.split("");
          //   return str.join("\n");
          // }
        },

        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "维护里程:km",
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255,255,255,0.65)",
          padding: [0, 0, 0, 50],
          lineHeight: -3,
        },
        left: 8,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
        nameGap: 30,
        // 刻度标签
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          inside: true,
          align: "left", // 添加水平对齐方式
          verticalAlign: "bottom", // 添加垂直对齐方式
          margin: 0, // 替换padding为margin控制间距
          padding: [0, -30, 0, 0], // 将标签向左移动
        },
        // y轴分隔线
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
      },
    ],
    series: [
      {
        name: "一级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        // color: "#93E3FC ",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#78DFFF" }, // 顶部
          { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
        ]),
        data: levelOne.value,

      },
      {
        name: "二级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        // color: "#309CFF",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#309CFF" }, // 顶部
          { offset: 1, color: "rgba(48,156,255,0.2)" }, // 底部
        ]),
        data: levelTwo.value,
      },
      {
        name: "三级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 20,
        // color: "#5057FD",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#5057FD" }, // 顶部
          { offset: 1, color: "rgba(80,87,253,0.2)" }, // 底部
        ]),
        data: levelThree.value,
      },
      {
        name: "四级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        // color: "#5AF5D5",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#5AF5D5" }, // 顶部
          { offset: 1, color: "rgba(90,245,213,0.2)" }, // 底部
        ]),
        data: levelFour.value,
      },
      {
        name: "五级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        // color: "#FFC733",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FFC733" }, // 顶部
          { offset: 1, color: "rgba(255,199,51,0.2)" }, // 底部
        ]),
        data: levelFive.value,
      },
      {
        name: "六级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        // color: "#FE772A",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FE772A " }, // 顶部
          { offset: 1, color: "rgba(254,119,42,0.2)" }, // 底部
        ]),
        data: levelSix.value,
      },
      {
        name: "七级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 10,
        // color: "#E33F3F",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#E33F3F " }, // 顶部
          { offset: 1, color: "rgba(227,63,63,0.2)" }, // 底部
        ]),
        data: levelSeven.value,
      },
    ],
  };

  option && firstChart.setOption(option);
};
const isActive1 = ref("航道概况");
const changeActive1 = (val) => {
  isActive1.value = val;
};

//航标概况
const isShowMore2 = ref(false);
const navigationMarkData = ref({});
const beaconSituationDetailFn = () => {
  beaconSituationDetail().then((res) => {
    if (res.code === 200 && res.data.length) {
      navigationMarkData.value = res.data[0];
    }
  });
};
const secondTableList = ref([]);
const xAxisSecondData = ref([]);
const seriesSecondData = ref([]);
const rtuBeaconChartFn = () => {
  rtuBeaconChart().then((res) => {
    if (res.code === 200 && res.data.length) {
      secondTableList.value = res.data;
      res.data.forEach((item) => {
        xAxisSecondData.value.push(item.region);
        seriesSecondData.value.push(item.rtuBeacon);
      });
      initSecondChart();
    }
  });
};
const initSecondChart = () => {
  let secondChart = echarts.getInstanceByDom(
    document.getElementById("second-chart")
  );
  if (secondChart == null) {
    secondChart = echarts.init(document.getElementById("second-chart"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    // legend: {
    //   textStyle: {
    //     fontSize: 12,
    //   },
    //   itemGap: 4,
    //   icon: 'circle',
    //   itemWidth: 6,
    //   itemHeight: 6,
    //   left:'30px'
    // },
    grid: {
      top: "15%",
      left: "5%",
      right: "10%",
      bottom: "0%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 8,
        // startValue: 0,
        // endValue: 7,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisSecondData.value,
        name: "区域\n中心",
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255,255,255,0.65)",
          rich: {
            a: {
              align: "center", // 居中显示
            },
          },
        },
        axisLabel: {
          color: "#FFFFFF",
          // interval: 0,
          // formatter: function (value) {
          //   //x轴的文字改为竖版显示
          //   var str = value.split("");
          //   return str.join("\n");
          // }
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "座数",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "12px",
          color: "rgba(255, 255, 255, 0.65)", // 设置透明度为65%
          padding: [0, 30, 0, 0],
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
        nameGap: 15,
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)", // 设置透明度为65%
        },
      },
    ],
    series: [
      {
        name: "遥测遥控航标数",
        data: seriesSecondData.value,
        type: "bar",
        barWidth: 8,
        // label: {
        //   show: true,
        //   position: "top",
        //   color: "#FFFFFF",
        // },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#78DFFF" }, // 顶部
            { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部

          ]),

        },
      },
    ],
  };

  option && secondChart.setOption(option);
};
const isActive2 = ref("航标概况");
const changeActive2 = (val) => {
  isActive2.value = val;
};

//智慧船闸
const isShowMore3 = ref(false);
const shipLockData = ref({});
const getShipLockNumFn = () => {
  getShipLockNum().then((res) => {
    if (res.code === 200 && res.data.length) {
      shipLockData.value = res.data[0];
    }
  });
};
const seriesThirdData = ref([]);
const getShipLockRateFn = () => {
  getShipLockRate().then((res) => {
    if (res.code === 200 && res.data.length) {
      let arr = [];
      for (let i = 0; i < res.data.length; i++) {
        let el = res.data[i];
        let obj = {};
        obj.name = el.region;
        obj.value = el.maintenanceOfShiplock;
        obj.rate = el.maintenanceShipLocksRate;
        arr.push(obj);
      }
      seriesThirdData.value = arr;
      initThirdChart();
    }
  });
};
const initThirdChart = () => {
  let thirdChart = echarts.getInstanceByDom(
    document.getElementById("third-chart")
  );
  if (thirdChart != null && thirdChart != "" && thirdChart != undefined) {
    thirdChart.dispose();
  }
  thirdChart = echarts.init(document.getElementById("third-chart"));

  let option;
  option = {

    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      // formatter: "{b} : {c}个",
    },
    legend: {
      top: "60%",
      left: "center",
      orient: "horizontal", // 水平排列
      width: "60%", // 限制图例宽度
      itemWidth: 8, // 缩小图例标记
      itemHeight: 8,
      itemGap: 20, // 增加项间距
      textStyle: {
        color: "#FFFFFF",
        fontSize: 16, // 调小字体
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
        padding: [0, 0, -2, 0],
      },
      pageIconSize: 10, // 分页按钮大小
      pageButtonItemGap: 4, // 分页按钮间距
    },
    series: [
      {
        name: "", // 将name设置为空字符串
        type: "pie",
        center: ["50%", "50%"], //圆心坐标
        radius: ["60%", "70%"], //设置成环状
        selectedMode: "single", //设置饼图的选中模式为单选模式
        data: seriesThirdData.value,


        // label: {
        //   show: true, //每个扇区上显示文字标签
        //   formatter: "{b}\n{c}个",
        //   color: "#FFFFFF",
        // },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        width: "200px",
        top: "-40%",
        left: "25%",

        // labelLine: {
        //   show: true, //标签连接线
        // },
      },
    ],
  };

  option && thirdChart.setOption(option);
};
const seriesFourthData = ref([]);
const goodsAnalysisChartFn = () => {
  goodsAnalysisChart("年", new Date().getFullYear() - 1).then((res) => {
    seriesFourthData.value = [];
    if (res.code === 200 && res.data) {
      let arr = [];
      let colorData = [
        "#6B9BFD",
        "#af71db",
        "#ffa257",
        "#135ddf",
        "#0e8a89",
        "#ffcb32",
        "#4ed9a0",
        "#67cdf7",
        "#67c577",
        "#13cdff",
        "#91cc75",
        "#99cdff",
        "#10757C",
        "#C8778E",
        "#D4B6F4",
        "#8F7059",
        "#EDD18C",
        "#CA3F54",
        "#01448B",
        "#165dff",
        "#FFFF33",
        "#B22222",
        "#FFB6C1",
        "#4B0082",
        "#DDA0DD",
        "#E6E6FA",
        "#F08080",
        "#483D8B",
        "#40E0D0",
        "#330033",
        "#996666",
        "#996699",
        "#EE0000",
        "#6666FF",
        "#660099",
        "#666699",
        "#0000FF",
        "#FF9933",
        "#CC33CC",
        "#003333",
      ];
      res.data.cargoType.forEach((item, index) => {
        let obj = {};
        obj.name = item;
        obj.value = res.data.cargoPrecent[index];
        obj.itemStyle = {
          color: colorData[index],
        };
        arr.push(obj);
      });
      let other = {};
      arr.forEach((item, index) => {
        if (item.name === "其他") {
          other = item;
          arr.splice(index, 1);
          return;
        }
      });
      arr.push(other);
      seriesFourthData.value = arr;
      initFourthChart();

      // 合并"其他"项
      // let otherValue = 0;
      // res.data.cargoType.forEach((item, index) => {
      //   if (index >= 11) {  // 保留前n个主要分类
      //     otherValue += res.data.cargoPrecent[index];
      //     return;
      //   }

      //   let obj = {
      //     name: item,
      //     value: res.data.cargoPrecent[index],
      //     itemStyle: { color: colorData[index] }
      //   };
      //   arr.push(obj);
      // });

      // // 添加其他项
      // if (otherValue > 0) {
      //   arr.push({
      //     name: "其他",
      //     value: otherValue,
      //     itemStyle: { color: '#999999' }
      //   });
      // }

      // seriesFourthData.value = arr;
      // initFourthChart();
    }
  });
};
const initFourthChart = () => {
  let fourthChart = echarts.getInstanceByDom(
    document.getElementById("fourth-chart")
  );
  if (fourthChart != null && fourthChart != "" && fourthChart != undefined) {
    fourthChart.dispose();
  }
  fourthChart = echarts.init(document.getElementById("fourth-chart"));

  let option;
  option = {

    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      formatter: "{b} : {c}%",
    },
    legend: {
      top: "55%",
      left: "center",
      orient: "horizontal", // 水平排列
      width: "100%", // 限制图例宽度
      itemWidth: 8, // 缩小图例标记
      itemHeight: 8,
      itemGap: 8, // 增加项间距
      textStyle: {
        color: "rgba(255,255,255,0.85)",//文本的透明度
        fontSize: 16, // 调小字体
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
        padding: [0, 0, -2, 0],
      },
      pageIconSize: 10, // 分页按钮大小
      pageButtonItemGap: 4, // 分页按钮间距
      // formatter: function (name) {
      //   // 阶梯式宽度控制
      //   const maxWidths = [80, 70, 60, 50]; // 每列最大宽度
      //   const lines = [];
      //   let currentLine = [];
      //   let currentWidth = 0;

      //   name.split('').forEach(char => {
      //     const charWidth = char.charCodeAt(0) > 255 ? 14 : 7; // 中文字符14px，字母7px
      //     const maxWidth = maxWidths[lines.length] || 50; // 最后一列50px

      //     if (currentWidth + charWidth > maxWidth) {
      //       lines.push(currentLine.join(''));
      //       currentLine = [char];
      //       currentWidth = charWidth;
      //     } else {
      //       currentLine.push(char);
      //       currentWidth += charWidth;
      //     }
      //   });

      //   lines.push(currentLine.join(''));
      //   return lines.join('\n');
      // }
    },
    series: [
      {
        name: "", // 将 name 设置为空字符串
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        radius: ["60%", "70%"], //设置成环状
        selectedMode: "single",
        data: seriesFourthData.value,
        // label: {
        //   show: true, //每个扇区上显示文字标签
        //   color: "#FFFFFF",
        //   formatter: "{b}\n{c}%",
        // },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          show: true, //标签连接线
        },
        width: "200px",
        top: "-40%",
        left: "25%",
      },
    ],
  };

  option && fourthChart.setOption(option);
};
const currentTab = ref(1);
const currentTabChange = (val) => {
  currentTab.value = val;
  if (val === 1) {
    analysisDataFn1();
  } else if (val === 2) {
    analysisDataFn2();
  }
};
const goodsYear1 = ref("");
const oldGoodsYear1 = ref("");
const goodsFirstYearList = ref([]);
const goodsYear2 = ref("");
const oldGoodsYear2 = ref("");
const goodsSecondYearList = ref([]);
const goodsYear1Change = () => {
  if (goodsYear1.value.slice(0, 4) > goodsYear2.value.slice(0, 4)) {
    ElMessage({
      message: "开始年份不能大于结束年份",
      type: "warning",
    });
    goodsYear1.value = oldGoodsYear1.value;
    return;
  }
  analysisDataFn1();
};
const goodsYear2Change = (val) => {
  if (goodsYear2.value.slice(0, 4) < goodsYear1.value.slice(0, 4)) {
    ElMessage({
      message: "结束年份不能小于开始年份",
      type: "warning",
    });
    goodsYear2.value = oldGoodsYear2.value;
    return;
  }
  analysisDataFn1();
};
const seriesFifthData1 = ref([]);
const analysisDataFn1 = () => {
  analysisData(goodsYear1.value.slice(0, 4), goodsYear2.value.slice(0, 4)).then(
    (res) => {
      if (res.code === 200 && res.data) {
        let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let arr3 = ["", "", "", "", "", "", "", "", "", "", "", ""];
        let monthData = [];
        res.data.monthList.forEach((item) => {
          let month =
            item.slice(0, 1) == "0"
              ? item.slice(1, 2) - 1
              : item.slice(0, 2) - 1;
          monthData.push(month);
        });
        monthData.forEach((item, index) => {
          res.data.goodsSumYear1.forEach((item1, index1) => {
            if (index === index1) {
              arr1[item] = item1;
            }
          });
          res.data.goodSumYear2.forEach((item2, index2) => {
            if (index === index2) {
              arr2[item] = item2;
            }
          });
          res.data.goodsGrowThrate.forEach((item3, index3) => {
            if (index === index3) {
              arr3[item] = item3;
            }
          });
        });
        seriesFifthData1.value = [
          {
            name: `${goodsYear1.value}累积`,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " 吨";
                }
              },
              confine: true, //限制在图表区域内
            },
            barWidth: 5,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: " #78DFFF" }, // 顶部
                { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
              ]),
            },
            data: arr1,
          },
          {
            name: `${goodsYear2.value}累积`,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " 吨";
                }
              },
              confine: true, //限制在图表区域内
            },
            barWidth: 5,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFC733" }, // 顶部
                { offset: 1, color: "rgba(255,199,51,0.2)" }, // 底部
              ]),
            },
            data: arr2,
          },
          {
            name: `${goodsYear2.value}同比增长率`,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                if (value || value == 0) {
                  return value + " %";
                }
              },
              confine: true, //限制在图表区域内
            },
            itemStyle: {
              color: "#FFA257",
            },
            data: arr3,
          },
        ];
        initFifthChart1();
      }
    }
  );
};
const initFifthChart1 = () => {
  nextTick(() => {
    let fifthChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (fifthChart != null && fifthChart != "" && fifthChart != undefined) {
      fifthChart.dispose();
    }
    fifthChart = echarts.init(document.getElementById("fifth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8, // 设置图例项的宽度
        itemHeight: 8, // 设置图例项的高度
        textStyle: {
          fontSize: "12px",
          color: "rgba(255,255,255,0.85)",
        },
        itemGap: 4,
        // icon: 'circle',
        // itemWidth: 10,
        // itemHeight: 10
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            color: "#FFFFFF",
            // interval: 0,
            // formatter: function (value) {
            //   //x轴的文字改为竖版显示
            //   let str=value
            //   let month = str.slice(0, -1);
            //   let suffix = str.slice(-1);
            //   return `${month}\n${suffix}`
            // }
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "货物量（吨）",
          nameTextStyle: {
            padding: [0, 0, 0, -50],
            fontWeight: "500",
            fontSize: "12px",
            color: "rgba(255,255,255,0.65)",
          },
          axisLabel: {
            color: "rgba(255,255,255,0.65)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)", // 使用 RGBA 设置颜色和透明度
              width: 1, // 可选：设置线宽
            },
          },
          // min: 0,
          // max: 250,
          // interval: 50,
          // axisLabel: {
          //   formatter: "{value} ml",
          // },
        },
        {
          type: "value",
          name: "增长率",
          // min: 0,
          // max: 25,
          // interval: 5,
          axisLabel: {
            formatter: "{value} %",
            color: "rgba(255,255,255,0.65)",
          },
          nameTextStyle: {
            padding: [0, -40, 0, 0],
            fontWeight: "500",
            fontSize: "12px",
            color: "rgba(255,255,255,0.65)!important",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.2)", // 使用 RGBA 设置颜色和透明度
              width: 1, // 可选：设置线宽
            },
          },
        },
      ],
      series: seriesFifthData1.value,
    };
    option && fifthChart.setOption(option, true);
  });
};
const sluiceYear1 = ref("");
const oldSluiceYear1 = ref("");
const sluiceFirstYearList = ref([]);
const sluiceYear2 = ref("");
const oldSluiceYear2 = ref("");
const sluiceSecondYearList = ref([]);
const sluiceYear1Change = () => {
  if (sluiceYear1.value.slice(0, 4) > sluiceYear2.value.slice(0, 4)) {
    ElMessage({
      message: "开始年份不能大于结束年份",
      type: "warning",
    });
    sluiceYear1.value = oldSluiceYear1.value;
    return;
  }
  analysisDataFn2();
};
const sluiceYear2Change = (val) => {
  if (sluiceYear2.value.slice(0, 4) < sluiceYear1.value.slice(0, 4)) {
    ElMessage({
      message: "结束年份不能小于开始年份",
      type: "warning",
    });
    sluiceYear2.value = oldSluiceYear2.value;
    return;
  }
  analysisDataFn2();
};
const seriesFifthData2 = ref([]);
const analysisDataFn2 = () => {
  analysisData(
    sluiceYear1.value.slice(0, 4),
    sluiceYear2.value.slice(0, 4)
  ).then((res) => {
    if (res.code === 200 && res.data) {
      let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      let arr3 = ["", "", "", "", "", "", "", "", "", "", "", ""];
      let monthData = [];
      res.data.monthList.forEach((item) => {
        let month =
          item.slice(0, 1) == "0" ? item.slice(1, 2) - 1 : item.slice(0, 2) - 1;
        monthData.push(month);
      });
      monthData.forEach((item, index) => {
        res.data.shipPassSumYear1.forEach((item1, index1) => {
          if (index === index1) {
            arr1[item] = item1;
          }
        });
        res.data.shipPassSumYear2.forEach((item2, index2) => {
          if (index === index2) {
            arr2[item] = item2;
          }
        });
        res.data.shipPassGrowThrate.forEach((item3, index3) => {
          if (index === index3) {
            arr3[item] = item3;
          }
        });
      });
      seriesFifthData2.value = [
        {
          name: `${sluiceYear1.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " 艘";
              }
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: "#6B9BFD",
          },
          data: arr1,
        },
        {
          name: `${sluiceYear2.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " 艘";
              }
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: "#6FE1B2",
          },
          data: arr2,
        },
        {
          name: `${sluiceYear2.value}同比增长率`,
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              if (value || value == 0) {
                return value + " %";
              }
            },
            confine: true, //限制在图表区域内
          },
          itemStyle: {
            color: "#FFA257",
          },
          data: arr3,
        },
      ];
      initFifthChart2();
    }
  });
};
const initFifthChart2 = () => {
  nextTick(() => {
    let fifthChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (fifthChart != null && fifthChart != "" && fifthChart != undefined) {
      fifthChart.dispose();
    }
    fifthChart = echarts.init(document.getElementById("fifth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8, // 设置图例项的宽度
        itemHeight: 8, // 设置图例项的高度
        textStyle: {
          fontSize: "12px",
          color: "rgba(255,255,255,0.85)",
        },
        itemGap: 4,
        // icon: 'circle',
        // itemWidth: 10,
        // itemHeight: 10
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            color: "#FFFFFF",
            // interval: 0,
            // formatter: function (value) {
            //   //x轴的文字改为竖版显示
            //   let str=value
            //   let month = str.slice(0, -1);
            //   let suffix = str.slice(-1);
            //   return `${month}\n${suffix}`
            // }
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "过闸船舶数（艘）",
          // min: 0,
          // max: 250,
          // interval: 50,
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "12px",
            color: "rgba(255,255,255,0.65)",
          },
          axisLabel: {
            // formatter: "{value} ml",
            color: "rgba(255,255,255,0.65)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.2,
            },
          },
        },
        {
          type: "value",
          name: "增长率",
          // min: 0,
          // max: 25,
          // interval: 5,
          axisLabel: {
            formatter: "{value} %",
            color: "rgba(255,255,255,0.65)",
          },
          nameTextStyle: {
            padding: [0, -40, 0, 0],
            fontWeight: "500",
            fontSize: "12px",
            color: "#FFFFFF",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#FFFFFF",
              opacity: 0.2,
            },
          },
        },
      ],
      series: seriesFifthData2.value,
    };

    option && fifthChart.setOption(option, true);
  });
};
const shipLockTableData = ref([]);
const getShipLockDetailFn = () => {
  getShipLockDetail("年", new Date().format("yyyy")).then((res) => {
    if (res.code === 200 && res.data.length) {
      shipLockTableData.value = res.data;
    }
  });
};
const isActive3 = ref("智慧船闸");
const changeActive3 = (val) => {
  isActive3.value = val;
};

//船舶概览
const isShowMore4 = ref(false);
const departWorkShipNum = ref("");
const getShipsituationSumFn = () => {
  getShipsituationSum().then((res) => {
    if (res.code === 200 && res.data.length) {
      departWorkShipNum.value = res.data[0].departWorkShipNum;
    }
  });
};
const sixthTableList = ref([]);
const xAxisSixthData = ref([]);
const seriesSixthData = ref([]);
const regionDistributionChartFn = () => {
  regionDistributionChart().then((res) => {
    if (res.code === 200 && res.data.length) {
      let data = res.data[0];
      xAxisSixthData.value = data.region;
      sixthTableList.value = data.region.map((name, index) => ({
        name,
        value: data.workShipNum[index],
      }));
      let arr = [];
      for (let key in data) {
        if (key !== "region") {
          let obj = {
            name: "",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            stack: "Ad",
            barWidth: 10,
            data: [],
          };
          if (key === "workShipNum") {
            // obj.name = "区域中心工作船舶";
            // obj.data = data[key];
            // arr.push(obj);
          } else if (key === "beaconWorkShipNum") {
            obj.name = "航标船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#78DFFF" }, // 顶部
                { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
              ]),
            };

            arr.push(obj);
          } else if (key === "beaconFastShipNum") {
            obj.name = "巡标快船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#309CFF" }, // 顶部
                { offset: 1, color: "rgba(48,156,255,0.2) " }, // 底部
              ]),
            };

            arr.push(obj);
          } else if (key === "engineerShipNum") {
            obj.name = "工程船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5057FD" }, // 顶部
                { offset: 1, color: "rgba(80,87,253,0.2)" }, // 底部
              ]),
            };

            arr.push(obj);
          } else if (key === "otherShipNum") {
            obj.name = "其他类型船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5AF5D5" }, // 顶部
                { offset: 1, color: "rgba(90,245,213,0.2)" }, // 底部
              ]),
            };

            obj.nameTextStyle = {
              color: "rgba(255,255,255,0.85)",
            };
            arr.push(obj);
          } else if (key === "bargeShipNum") {
            obj.name = "趸船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FFC733" }, // 顶部
                { offset: 1, color: "rgba(255,199,51,0.2)" }, // 底部
              ]),
            };

            arr.push(obj);
          } else if (key === "measureShipNum") {
            obj.name = "测量船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FE772A" }, // 顶部
                { offset: 1, color: "rgba(254,119,42,0.2)" }, // 底部
              ]),
            };



            arr.push(obj);
          } else if (key === "trafficShipNum") {

            obj.name = "交通船";
            obj.data = data[key];
            obj.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#E33F3F" }, // 顶部
                { offset: 1, color: "rgba(227,63,63,0.2)" }, // 底部
              ]),


            };

            arr.push(obj);
          }
        }
      }
      seriesSixthData.value = arr;
      initSixthChart();
    }
  });
};
const initSixthChart = () => {
  let sixthChart = echarts.getInstanceByDom(
    document.getElementById("sixth-chart")

  );
  if (sixthChart == null) {
    sixthChart = echarts.init(document.getElementById("sixth-chart"));
  }
  let option;
  option = {
    tooltip: {
      // trigger: 'axis',
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      textStyle: {
        fontSize: 16,
        color: "rgba(255,255,255,0.85)",
        rich: {
          a: {
            verticalAlign: "middle",
          },
        },
        padding: [0, 0, -2, 0],
      },
      itemGap: 13,
      icon: "rect",
      itemWidth: 8,
      itemHeight: 8,
      left: "25%",
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "8%",
      bottom: "0%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 5,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisSixthData.value,
        name: "区域\n中心",
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: 16,
          color: "rgba(255, 255, 255, 0.65)", // 设置透明度为 65%
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
        axisLabel: {
          color: "#FFFFFF",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "船舶数:艘",
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255, 255, 255, 0.65)", // 设置透明度为 65%
          lineHeight: 20,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
        nameGap: 15,
        axisLabel: {
          color: "rgba(255, 255, 255, 0.65)",
        },
      },
    ],
    series: seriesSixthData.value,

  };

  option && sixthChart.setOption(option);
};
const xAxisSeventhData = ref([]);
const seriesSeventhData = ref([]);
const cityshipsDataFn = () => {
  getShipNum().then((res) => {
    if (res.code === 200 && res.data.length) {
      let data = res.data;
      let arr = [];
      data.forEach((item) => {
        xAxisSeventhData.value.push(item.cityName);
        arr.push(item.shipNum);
      });
      seriesSeventhData.value = [
        {
          name: "船舶数量",
          data: arr,
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "top",
            color: "#FFFFFF",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },
        },
      ];
      initSeventhChart();
    }
  });
};
const initSeventhChart = () => {
  let seventhChart = echarts.getInstanceByDom(
    document.getElementById("seventh-chart")
  );

  if (seventhChart == null) {
    seventhChart = echarts.init(document.getElementById("seventh-chart"));
  }

  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    // legend: {
    //   textStyle: {
    //     fontSize: 12,
    //   },
    //   itemGap: 4,
    //   icon: 'circle',
    //   itemWidth: 6,
    //   itemHeight: 6,
    //   left:'20px'
    // },
    grid: {
      top: "20%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 10,
        // startValue: 0,
        // endValue: 7,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisSeventhData.value,
        name: "区域中心",
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "12px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "#FFFFFF",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位：艘",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "12px",
          color: "rgba(255,255,255,0.65)",
          padding: [0, 50, 0, 0],
        },
        nameGap: 15,
        axisLabel: {
          color: "rgab(255,255,255,0.65)",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },

      },
    ],

    series: seriesSeventhData.value,
  };

  option && seventhChart.setOption(option);
};

//桥梁净高监测
const isShowMore5 = ref(false);
const departBridgeTotal = ref("");
const xAxisEighthData = ref([]);
const seriesEighthData = ref([]);
const regionChartFn = () => {
  regionChart().then((res) => {
    if (res.code === 200 && res.data.length) {
      departBridgeTotal.value = res.data[0].departBridgeTotal;
      let data = res.data[0].regionBridgeTotal;
      data.forEach((item) => {
        xAxisEighthData.value.push(item.regionName);
        seriesEighthData.value.push(item.regionBridgeTotal);
      });
      initEighthChart();
    }
  });
};
const initEighthChart = () => {
  let eighthChart = echarts.getInstanceByDom(
    document.getElementById("eighth-chart")
  );
  if (eighthChart != null && eighthChart != "" && eighthChart != undefined) {
    eighthChart.dispose();
  }
  eighthChart = echarts.init(document.getElementById("eighth-chart"));

  let option;
  option = {
    tooltip: {
      trigger: "axis",
      confine: true, //限制在图表区域内
    },
    // legend: {
    //   textStyle: {
    //     fontSize: 12
    //   },
    //   itemGap: 4,
    //   icon: 'circle',
    //   itemWidth: 6,
    //   itemHeight: 6,
    //   left:'30px'
    // },
    grid: {
      top: "13%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 10,
        // startValue: 0,
        // endValue: 9,
        zoomLock: false,
      },
    ],
    xAxis: {
      type: "category",
      name: "区域\n中心",
      data: xAxisEighthData.value,
      axisTick: {
        alignWithLabel: true, //控制刻度线是否与刻度标签对齐
        show: false, //是否显示刻度线
      },
      nameTextStyle: {
        fontWeight: "400",
        fontSize: 16,
        color: "rgba(255,255,255,0.65)",
      },
      // 刻度标签
      axisLabel: {
        color: "#FFFFFF",
        fontSize: 16,
        // interval: 0,
        // formatter: function (value) {
        //   //x轴的文字改为竖版显示
        //   var str = value.split("");
        //   return str.join("\n");
        // },
      },
    },
    yAxis: {
      type: "value",
      name: "数量",
      nameTextStyle: {
        fontWeight: "500",
        fontSize: "12px",
        color: "rgba(255,255,255,0.65)",
        padding: [0, 30, 0, 0],
      }, splitLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF",
          opacity: 0.2,
        },
      },
      nameGap: 15,
      axisLabel: {
        color: "rgba(255,255,255,0.65)",
      },
      itemGap: 20,
    },
    series: [
      {
        name: "等级航道桥梁",
        data: seriesEighthData.value,
        type: "bar",
        barWidth: 8,
        itemStyle: {
          // color: "#78DFFF",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#78DFFF" }, // 顶部
            { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
          ]),
        },
        // label: {
        //   show: true,
        //   position: "top",
        //   color: "#FFFFFF",
        // },
      },
    ],
  };
  option && eighthChart.setOption(option);
};
const clearHeightBridgeInstallSum = ref("");
const clearHeightDetailFn = () => {
  clearHeightDetail("", "", "").then((res) => {
    if (res.code === 200 && res.data.length) {
      clearHeightBridgeInstallSum.value =
        res.data[0].clearHeightBridgeInstallSum;
    }
  });
};
const bridge = ref("");
const regionName = ref("");
const bridgeData = ref([]);
const getAllBridgeFn = () => {
  getAllBridge().then((res) => {
    if (res.code === 200 && res.data.length) {
      bridge.value = res.data[0].bridgeName;
      regionName.value = res.data[0].regionName;
      bridgeData.value = res.data;
      clearHeightTrendChartFn();
      // clearHeightTrendChartStaticFn();
    }
  });
};
const changeBridge = (value) => {
  bridge.value = value;
  bridgeData.value.forEach((item) => {
    if (value === item.bridgeName) {
      regionName.value = item.regionName;
      clearHeightTrendChartFn();
      // clearHeightTrendChartStaticFn();
    }
  });
};
const upClearHeight = ref("");
const baseApi = `${import.meta.env.VITE_APP_BASE_API}attach/img`;
const bridgeImage = ref("");
const xAxisNinthData = ref([]);
const seriesNinthData = ref([]);
const clearHeightTrendChartFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  clearHeightTrendChart(
    bridge.value,
    regionName.value,
    new Date(endTime).format("yyyy-MM-dd"),
    new Date(time).format("yyyy-MM-dd")
  ).then((res) => {
    if (res.code === 200 && res.data.length) {
      let data = res.data[0];
      upClearHeight.value = data.upClearHeight;
      if (
        data.bridgeImage != null &&
        data.bridgeImage != "" &&
        data.bridgeImage != undefined
      ) {
        bridgeImage.value = data.bridgeImage.split("img")[1];
      }
      xAxisNinthData.value = [];
      seriesNinthData.value = [];

      if (data.clearHeightHistoryData.length) {
        let chartData = sortClass(data.clearHeightHistoryData);
        if (chartData.length === 1) {
          let arr = [];
          chartData[0].forEach((item) => {
            xAxisNinthData.value.push(item.updateTime.slice(5, 10));
            arr.push({
              name: item.jgdMc,
              value: item.cJgz,
            });
          });
          seriesNinthData.value = [
            {
              data: arr,
              type: "line",
              itemStyle: {
                color: "#78DFFF",
              },
            },
          ];
        } else {
          let arr1 = [];
          let arr2 = [];
          chartData[0].forEach((item) => {
            xAxisNinthData.value.push(item.updateTime.slice(5, 10));
            arr1.push({
              name: item.jgdMc,
              value: item.cJgz,
            });
          });
          chartData[1].forEach((item2) => {
            arr2.push({
              name: item2.jgdMc,
              value: item2.cJgz,
            });
          });
          seriesNinthData.value = [
            {
              data: arr2,
              type: "line",
              itemStyle: {
                color: "#91cc75",
              },
            },
            {
              data: arr1,
              type: "line",
              itemStyle: {
                color: "#75a7d4",
              },
            },
          ];
        }
      }
      initNinthChart();
    }
  });
};
//数组分类
const sortClass = (sortData) => {
  const groupBy = (array, f) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.jgdMc; // 返回需要分组的对象
  });
  return sorted;
};
const initNinthChart = () => {
  nextTick(() => {
    let ninthChart = echarts.getInstanceByDom(
      document.getElementById("ninth-chart")
    );
    if (ninthChart != null && ninthChart != "" && ninthChart != undefined) {
      ninthChart.dispose();
    }
    ninthChart = echarts.init(document.getElementById("ninth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
        formatter: function (params) {
          console.log(params);
          let template = `${params[0].axisValue}<br>`;
          for (let i = 0; i < params.length; i++) {
            let item = params[i];
            template +=
              item.marker + item.data.name + ": " + item.data.value + "<br>";
            // return params[x].data.name + ':' + params[x].data.value
          }
          return template;
        },
      },
      grid: {
        top: "20%",
        left: "5%",
        right: "10%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 60,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        name: "时间",
        data: xAxisNinthData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "12px",
          color: "rgba(255,255,255,0.85)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          // interval: 'auto',
          // rotate: 60,
        },
      },
      yAxis: {
        type: "value",
        name: "净高值（m）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "12px",
          color: "rgba(255,255,255,0.65)",
        }, splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
        nameGap: 15,
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
        },
      },
      series: seriesNinthData.value,
    };
    option && ninthChart.setOption(option);
  });
};
//桥梁动态通航净高数据
const clearHeightTrendChartStaticData = ref([]);
const clearHeightTrendChartStaticFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  clearHeightTrendChartStatic(
    bridge.value,
    regionName.value,
    new Date(endTime).format("yyyy-MM-dd"),
    new Date(time).format("yyyy-MM-dd")
  ).then((res) => {
    if (res.code === 200 && res.data.length) {
      clearHeightTrendChartStaticData.value = res.data;
    }
  });
};

//水位监测详情
const waterlevelStationSum = ref("");
const waterlevelDetailFn = () => {
  waterlevelDetail("", "", "").then((res) => {
    if (res.code === 200 && res.data.length) {
      waterlevelStationSum.value = res.data[0].waterlevelStationSum;
    }
  });
};
const waterStation = ref("");
const waterStationData = ref([]);
const getWaterStationFn = () => {
  getWaterStation().then((res) => {
    if (res.code === 200 && res.data.length) {
      // waterStation.value = res.data[0].monitorStation;
      waterStation.value = "河源水位站";
      waterStationData.value = res.data;
      trendChartFn();
      setTimeout(() => {
        warnWaterLevelFn();
      }, 1000);
    }
  });
};
const changeWaterStation = (value) => {
  waterStation.value = value;
  trendChartFn();
  setTimeout(() => {
    warnWaterLevelFn();
  }, 1000);
};
const xAxisTenthData = ref([]);
const seriesTenthData = ref([]);
const trendChartFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  trendChart(
    waterStation.value,
    new Date(endTime).format("yyyy-MM-dd"),
    new Date(time).format("yyyy-MM-dd")
  ).then((res) => {
    if (res.code === 200) {
      xAxisTenthData.value = [];
      seriesTenthData.value = [];
      res.data.forEach((item) => {
        xAxisTenthData.value.push(item.reporttime.slice(5, 10));
        seriesTenthData.value.push(item.waterlevelValue);
      });
      initTenthChart();
    }
  });
};
const initTenthChart = () => {
  nextTick(() => {
    let tenthChart = echarts.getInstanceByDom(
      document.getElementById("tenth-chart")
    );
    if (tenthChart != null && tenthChart != "" && tenthChart != undefined) {
      tenthChart.dispose();
    }
    tenthChart = echarts.init(document.getElementById("tenth-chart"));

    let option;
    option = {
      legend: {
        data: ["水位值", "警戒水位"],
        textStyle: {
          fontSize: 16,
          color: "rgba(255,255,255,0.85)",
        },
        icon: "rect",
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 10,
        right: "7%",
        top: "2%",
      },
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
        formatter: function (params) {
          let template = `<b>${params[0].axisValue}</b><br>`;
          for (let i = 0; i < 1; i++) {
            let item = params[i];
            template +=
              item.marker +
              item.seriesName +
              ": " +
              `<b style="float:right;padding-left: 20px;">${item.data}m</b><br>`;
          }
          return template;
        },
      },
      grid: {
        top: "15%",
        left: "5%",
        right: "7%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 60,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        name: "时间",
        data: xAxisTenthData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.85)",
          // interval: 'auto',
          // rotate: 60,
          // overflow: 'truncate',
          // formatter(v){
          //     return ' '.repeat(4)+v+' '.repeat(4);
          // }
        },
      },
      yAxis: {
        type: "value",
        name: "水位值:m",
        nameTextStyle: {
          fontWeight: "400",
          fontSize: 16,
          color: "rgba(255,255,255,0.65)",
        }, splitLine: {
          show: true,
          lineStyle: {
            color: "#FFFFFF",
            opacity: 0.2,
          },
        },
        nameGap: 15,
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
        },
      },
      series: [
        {
          name: "水位值",
          data: seriesTenthData.value,
          type: "line",
          smooth: true,
          lineStyle: {
            // color: "#78DFFF", // 线条颜色
            type: "solid",
            width: 2, // 线条宽度11
          },
          itemStyle: {
            color: "#78DFFF",//线条颜色
          },

          smooth: true, // 是否平滑曲线

        },
        {
          name: "警戒水位",
          type: "line",
          // data: jingjie,
          // showSymbol: false,
          itemStyle: {
            color: "#F13939", // 新增颜色配置
          },
        },
      ],
    };
    option && tenthChart.setOption(option);
  });
};
const isActive4 = ref("水位监测");
const changeActive4 = (val) => {
  isActive4.value = val;
};
const hangdao = ref("");
const warnWaterLevelFn = () => {
  let time = new Date().getTime();
  let endTime = time - 7 * 24 * 3600 * 1000;
  warnWaterLevel(
    waterStation.value,
    new Date(endTime).format("yyyy-MM-dd"),
    new Date(time).format("yyyy-MM-dd")
  ).then((res) => {
    if (res.code === 200) {
      hangdao.value = res.data[0].cHangdmc;
      if (res.data[0].fazhito) {
        let jingjie = [];
        res.data.forEach((item) => {
          jingjie.push(item.fazhito);
        });
        nextTick(() => {
          let tenthChart = echarts.getInstanceByDom(
            document.getElementById("tenth-chart")
          );
          tenthChart.setOption({
            series: [
              {
                name: "水位值",
                data: seriesTenthData.value,
                type: "line",
                itemStyle: {
                  color: "#78DFFF",
                },
                // markLine: {
                //   symbol: 'none',
                //   data: [{
                //     yAxis: parseInt(res.data[0].fazhito),
                //     lineStyle: {
                //       color: 'red',
                //       type: 'dashed',
                //       width: 2
                //     },
                //     label: {
                //       show: true,
                //       position: 'end',
                //       formatter: '警戒线'
                //     }
                //   }]
                // }
              },
              {
                name: "警戒水位",
                type: "line",
                data: jingjie,
                showSymbol: false,
                lineStyle: {
                  color: "#FF0000",
                  width: 1,
                  type: "dashed",
                },
              },
            ],
          });
        });
      }
    }
  });
};

//视频监控
const videoNumObj = ref({});
const getVideoNumFn = () => {
  getVideoNum().then((res) => {
    if (res.code === 200) {
      videoNumObj.value = res.data[0];
    }
  });
};
const videoType = ref("船闸视频");
const videoTypeList = [{ name: "船闸视频" }, { name: "水上视频" }];
const currentVideo = ref("");
const videoCategoryData = ref([]);
const videoTypeChange = () => {
  currentVideo.value = "";
  videoCategoryFn();
};
const videoCategoryFn = () => {
  videoCategory(videoType.value === "船闸视频" ? 1 : 2).then((res) => {
    if (res.code === 200 && res.data.length) {
      videoCategoryData.value = res.data[0].children;
      currentVideo.value =
        videoType.value === "船闸视频"
          ? res.data[0].children[0].children[0].children[1].id
          : res.data[0].children[0].children[0].children[0].id;
      playVideoFn();
    }
  });
};
const handleNodeClick = (val) => {
  if (val.children.length === 0) {
    currentVideo.value = val.id;
    playVideoFn();
  }
};
const initVideo = () => {
  videojs("myVideo", {
    language: "zh-CN", //汉化
    autoplay: true, // true,浏览器准备好时开始播放
    loop: true, // 导致视频一结束就重新开始
    controls: true, //取消视频中的进度条
    muted: true, //是否静音
    preload: "metadata", // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 无法播放媒体源时显示的默认信息
    textTrackDisplay: false,
    techOrder: ["html5", "flash"],
  });
};
const playVideoFn = () => {
  playVideo(currentVideo.value).then((res) => {
    if (res.code === 200 && res.data) {
      const myPlayer = videojs("myVideo");
      myPlayer.src([
        {
          type: "application/x-mpegURL",
          src: res.data.url, //视频播放地址
        },
      ]);
      myPlayer.play();
    }
  });
};

//航道通告
const noticeData = ref([]);
const getWaterwayNoticeThreeFn = () => {
  getWaterwayNoticeThree().then((res) => {
    if (res.code === 200 && res.data.length) {
      noticeData.value = res.data;
    }
  });
};
const handleClick = (contents) => {
  let fileUrl =
    `${import.meta.env.VITE_APP_BASE_API}admin/file` +
    contents.split("/file")[1];
  window.open(fileUrl);
  // try{
  //   let reg = /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi
  //   if(contents.match(reg)){
  //     window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);
  //   }else{
  //     let matchReg = /<img.*?(?:>|\/>)/gi;
  //     let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
  //     let data = [];
  //     let arr = contents.match(matchReg);
  //     arr.forEach(item => {
  //       let src = item.match(srcReg);
  //       data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`)
  //     });

  //     router.push({
  //       path: "/pdf",
  //       query: { content: data.join(',') },
  //     });
  //   }
  // }catch(error){
  //   // alert(error)
  // }
};

//地图筛选
const isShowFilter = ref(false);
const checkAll1 = ref(false);
const isIndeterminate1 = ref(false);
const checkedValues1 = ref([]);
const options1 = ["达标", "不达标"];
const handleCheckAllChange1 = (val) => {
  checkedValues1.value = val ? options1 : [];
  isIndeterminate1.value = false;
  handleFilter();
};
const handleCheckedChange1 = (value) => {
  const checkedCount = value.length;
  checkAll1.value = checkedCount === options1.length;
  isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
  handleFilter();
};
const checkAll2 = ref(false);
const isIndeterminate2 = ref(false);
const checkedValues2 = ref([]);
const options2 = ["正常", "异常"];
const handleCheckAllChange2 = (val) => {
  checkedValues2.value = val ? options2 : [];
  isIndeterminate2.value = false;
  handleFilter();
};
const handleCheckedChange2 = (value) => {
  const checkedCount = value.length;
  checkAll2.value = checkedCount === options2.length;
  isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
  handleFilter();
};
const ais = ref(false);
const handleFilter = () => {
  let isDabiao = [];
  checkedValues1.value.forEach((item) => {
    if (item == "达标") {
      isDabiao.push(0);
    } else if (item == "不达标") {
      isDabiao.push(1);
    }
  });
  let hangbiao = [];
  checkedValues2.value.forEach((item) => {
    if (item == "正常") {
      hangbiao.push("正常");
    } else if (item == "异常") {
      hangbiao.push("异常");
    }
  });
  OlArcRef.value.filterFn(isDabiao.join(","), hangbiao.join(","), ais.value);
};

//行政审批
const adminApprovalData = ref([]);
const adminApprovalFn = () => {
  adminApproval().then((res) => {
    if (res.code === 200 && res.data.admin_approval.length) {
      adminApprovalData.value = res.data.admin_approval;
    }
  });
};

//航道检查
const channelCheckData = ref([]);
const channelCheckFn = () => {
  channelCheck().then((res) => {
    if (res.code === 200 && res.data.length) {
      channelCheckData.value = res.data;
    }
  });
};

//航道基础信息
const channelBaseData = ref([]);
const channelBaseFn = () => {
  channelBase().then((res) => {
    if (res.code === 200 && res.data.length) {
      channelBaseData.value = res.data;
    }
  });
};

//航标基础数据
const pharosBaseData = ref([]);
const pharosBaseFn = () => {
  pharosBase().then((res) => {
    if (res.code === 200 && res.data.length) {
      pharosBaseData.value = res.data;
    }
  });
};

//智慧船闸基础数据
const lockBaseData = ref([]);
const lockBaseFn = () => {
  lockBase().then((res) => {
    if (res.code === 200 && res.data.length) {
      lockBaseData.value = res.data;
    }
  });
};

//流量流速
const lslxStaticData = ref([]);
const lslxStaticFn = () => {
  lslxStatic().then((res) => {
    if (res.code === 200 && res.data.length) {
      lslxStaticData.value = res.data;
    }
  });
};

onMounted(() => {
  document.title = "智慧航道";
  //全省数据
  getProvinceWaterwayDataFn();
  //航道概况
  getWaterwayTotalNumFn();
  getnhdjhdDetailFn();
  //航标概况
  beaconSituationDetailFn();
  rtuBeaconChartFn();
  //智慧船闸
  getShipLockNumFn();
  getShipLockRateFn();
  goodsAnalysisChartFn();
  getShipLockDetailFn();
  getYearList().then((res) => {
    if (res.code === 200 && res.data.length) {
      let arr1 = [];
      let arr2 = [];
      res.data.forEach((item, index) => {
        if (index < res.data.length - 1) {
          arr1.push(`${item.year}年`);
        }
        arr2.push(`${item.year}年`);
      });

      goodsYear1.value = arr1[arr1.length - 1];
      goodsYear2.value = arr2[arr2.length - 1];
      goodsFirstYearList.value = arr1;
      goodsSecondYearList.value = arr2;

      sluiceYear1.value = arr1[arr1.length - 1];
      sluiceYear2.value = arr2[arr2.length - 1];
      sluiceFirstYearList.value = arr1;
      sluiceSecondYearList.value = arr2;
      //  这个是子组件?
      analysisDataFn1();
    }
  });
  //船舶概览
  getShipsituationSumFn();
  regionDistributionChartFn();
  cityshipsDataFn();
  //桥梁净高监测
  regionChartFn();
  clearHeightDetailFn();
  getAllBridgeFn();
  //水位监测
  waterlevelDetailFn();
  getWaterStationFn();
  //视频监控
  getVideoNumFn();
  videoCategoryFn();
  initVideo();
  //航道通告
  getWaterwayNoticeThreeFn();
  // //行政审批
  // adminApprovalFn();
  // //航道检查
  // channelCheckFn();
  // //航道基础数据
  // channelBaseFn();
  // //航标基础数据
  // pharosBaseFn();
  // //智慧船闸基础数据
  // lockBaseFn();
  // //流量流速
  // lslxStaticFn();
});
</script>

<style lang="scss" scoped>
@font-face {
  font-family: PingFang SC;
  src: url("../assets/fonts/PingFangSC-Medium.ttf");
}

@font-face {
  font-family: DIN;
  src: url("../assets/fonts/DIN.ttf");
}

@font-face {
  font-family: tx;
  src: url("../assets/fonts/tx.ttf");
}

.container {
  width: 5760px;
  height: 1200px;
  transform-origin: 0 0;
  position: relative;
  background: #0a2c3d;

  .main {
    width: 100%;
    height: 100%;
    position: absolute;

    .header {
      background-image: url("../assets/images/large-screen/header-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        font-size: 40px;
        font-weight: 800;
        height: 80px;
        line-height: 80px;
        text-align: center;
        text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
        background: linear-gradient(180deg, #ffffff 0%, #78dfff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .content {
      display: flex;
      box-sizing: content-box;

      .left-content {
        width: 1648px;
        height: 1040px;
        margin: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 804px;
          height: 500px;
          background: rgba(1, 128, 240, 0.1);
          margin-bottom: 40px;

          .top {
            background-image: url("../assets/images/large-screen/title-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
              font-size: 26px;
              font-weight: bold;
              padding: 9px 0px 11px 28px;
              color: rgba(255, 255, 255, 1);
            }

            .more {
              font-size: 18px;
              font-weight: 500;
              color: #78dfff;
              padding-right: 28px;
            }

            .active {
              color: #78dfff;
            }
          }
          .content {
            display: flex;

            .item-left {
              width: 156px;
              height: 336px;
              margin-left: 20px;
              margin-top: 73px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .title {
                width: 156px;
                height: 25px;
                font-family: "PingFang SC";
                font-weight: 500;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.85);
                line-height: 21px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                width: 96px;
                height: 39px;
                font-family: "DIN";
                font-weight: bold;
                font-size: 32px;
                color: #ffffff;
                line-height: 38px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }

            .item-right {
              .item-top {
                width: 586px;
                height: 44px;
                background: rgba(1, 128, 240, 0.1);
                border-radius: 0px 0px 0px 0px;
                background: url("../assets/images/large-screen/second-title-bg.png")
                  no-repeat;
                margin-top: 20px;
                font-family: "tx";
                font-weight: 400;
                font-size: 24px;
                color: #ffffff;
                line-height: 44px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                text-indent: 32px;
              }
            }
          }

          .m-top {
            margin: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-a {
              display: flex;
              height: auto;
              gap: 8px;

              .img {
                width: 74px;
                height: 75px;
              }

              .right {
                .title {
                  font-family: "PingFang SC";
                  font-weight: 500;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }

                .value {
                  font-family: "DIN";
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }
          }

          .m-buttom {
            display: flex;
            width: 100%;

            .m-item {
              width: 50%;

              .title {
                background: url("../assets/images/large-screen/second-title.png")
                  no-repeat;
                font-family: "tx";
                font-weight: 400;
                font-size: 24px;
                color: #ffffff;
                line-height: 31px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                text-indent: 40px;
                height: 45px;
                line-height: 45px;
                margin-left: 20px;
              }
            }
          }

          .count {
            display: flex;
            margin: 27px 28px 23px 28px;

            .count-item {
              width: 232px;
              height: 112px;
              background: linear-gradient(
                90deg,
                rgba(120, 223, 255, 0.02) 1%,
                rgba(41, 191, 238, 0.31) 59%,
                rgba(120, 223, 255, 0) 100%
              );
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              display: flex;

              .icon {
                width: 140px;
                height: 94px;
                margin: 9px 8px 24px 103px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .info {
                margin-top: 16px;

                .name {
                  font-size: 16px;
                  font-weight: 500;
                  color: #ffffff;
                  margin-bottom: 8px;
                }

                .value {
                  font-size: 36px;
                  font-weight: bold;
                  color: #ffffff;
                }
              }
            }
          }

          .work {
            font-family: "PingFang SC";
            font-weight: 500;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin: 20px;

            span {
              margin-left: 16px;
              font-family: "DIN";
              font-weight: bold;
              font-size: 32px;
              color: #ffffff;
              line-height: 38px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .single-count {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 27px 28px 23px 28px;
            background-image: url("../assets/images/large-screen/count-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .left {
              display: flex;
              align-items: center;

              .icon {
                width: 56px;
                height: 56px;
                margin: 16px 8px 16px 20px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .name {
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
              }
            }

            .value {
              font-size: 36px;
              font-weight: bold;
              color: #ffffff;
              padding-right: 20px;
            }
          }

          .subtitle {
            height: 45px;
            background-image: url("../assets/images/large-screen/second-title-long.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            line-height: 45px;
            margin-left: 124px;
            width: 100% !important;
            text-indent: 40px;
            font-style: normal;
            text-transform: none;
            font-family: "tx";
          }
          .subtitle-other {
            height: 45px;
            background-image: url(/src/assets/images/large-screen/second-title-long.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            line-height: 45px;
            margin-left: 164px;
            width: 622px !important;
            text-indent: 40px;
            font-style: normal;
            text-transform: none;
            font-family: "tx";
            margin-top: -329px;
            position: absolute;
          }

          .subtitle-small {
            height: 40px;
            background-image: url("../assets/images/large-screen/frame-bg-small.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-size: 20px;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            margin-left: 28px;
          }

          .pie-content {
            display: flex;
            margin-left: 28px;

            .pie-item {
              width: 50%;

              .title {
                height: 40px;
                background-image: url("../assets/images/large-screen/frame-bg-small.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                font-size: 20px;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
                line-height: 40px;
              }
            }
          }

          .more-count {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 子元素靠左对齐 */
            width: 108px;
            height: 337px;
            border-radius: 0px 0px 0px 0px;
            .more-count-item {
              width: 108px;
              height: 95px;
              margin-bottom: 10px; /* 可选：设置子元素之间的间距 */

              // background: linear-gradient(
              //   90deg,
              //   rgba(120, 223, 255, 0.02) 1%,
              //   rgba(41, 191, 238, 0.31) 59%,
              //   rgba(120, 223, 255, 0) 100%
              // );
              // border: 1px solid;
              // border-image: linear-gradient(
              //     360deg,
              //     rgba(120, 223, 255, 0),
              //     rgba(63, 207, 252, 0.81),
              //     rgba(120, 223, 255, 0)
              //   )
              //   1 1;

              .name {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.85);
                line-height: 21px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-top: 60px;

                img {
                  width: 36px;
                  height: 36px;
                  padding-right: 8px;
                }
              }

              .value {
                font-size: 36px;
                font-weight: bold;
                color: #ffffff;
                text-align: center;
                margin-top: 16px;
              }
            }
          }

          .choice {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 28px 28px 10px 28px;

            .tab {
              display: flex;

              .btn {
                font-size: 18px;
                font-weight: 400;
                color: rgba(217, 217, 217, 0.85);
                border: 1px solid #d9d9d9;
                padding: 6px 12px;
              }

              .active {
                color: #262626;
                background: #78dfff;
                border: 1px solid #78dfff;
              }
            }

            .year {
              .vs {
                padding: 0 5px;
                font-size: 18px;
                font-weight: bold;
                color: #309cff;
              }
            }
          }

          .my-table {
            margin-top: 0px;
          }
        }
      }

      .centre-content {
        width: 2304px; //-160
        height: 1040px;
        margin: 40px 0px;
        position: relative;

        .statistics {
          width: 333px;
          height: 222px;
          position: absolute;
          top: 46px;
          left: 46px;
          background: rgba(5, 48, 68, 0.8);

          .list {
            margin: 20px 20px 40px 20px;

            .item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 18px;

              .name {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-weight: 500;
                color: #ffffff;
                line-height: 38px;

                img {
                  width: 20px;
                  height: 20px;
                  padding-right: 4px;
                }
              }

              .value {
                font-size: 36px;
                font-weight: bold;
                color: #78dfff;
              }
            }
          }

          .point-out {
            height: 41px;
            background: rgba(4, 35, 54, 0.8);
            font-size: 18px;
            font-weight: 500;
            color: #ffffff;
            padding-left: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
              width: 22px;
              height: 22px;
              padding-right: 12px;
            }
          }
        }

        .static {
          position: absolute;
          top: 42px;
          left: 40px;
          display: flex;
          flex-direction: column;
          gap: 40px;

          .s-item {
            display: flex;
            align-items: center;
            width: 382px;
            height: 130px;
            background: url("../assets/images/large-screen/small-bg.png")
              no-repeat;
            gap: 16px;

            .img {
              width: 84px;
              height: 84px;
              margin-left: 22px;
            }

            .right {
              .title {
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 20px;
                color: rgba(255, 255, 255, 0.85);
                line-height: 23px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .value {
                font-family: DIN;
                font-weight: bold;
                font-size: 56px;
                color: #ffffff;
                line-height: 66px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }

        .zx {
          position: absolute;
          left: 2016px;
          top: 42px;
          width: 288px;
          height: 68px;
          background-color: #053044;
          display: flex;
          align-items: center;

          .img {
            width: 26px;
            height: 26px;
            margin-left: 24px;
          }

          .value {
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 28px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .filter {
          width: 288px;
          background: rgba(5, 48, 68, 0.8);
          border: 1px solid rgba(120, 223, 255, 0.4);
          position: absolute;
          top: 46px;
          right: 46px;

          .filter-title {
            font-weight: 500;
            font-size: 20px;
            color: #ffffff;
            background: rgba(4, 35, 54, 0.8);
            border-bottom: 1px solid rgba(120, 223, 255, 0.4);
            padding: 8px 0px 8px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
              padding-right: 24px;
            }
          }

          .filter-item {
            margin: 10px 24px;

            .name {
              color: #78dfff;
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
      }

      .right-content {
        width: 1648px;
        height: 1040px;
        margin: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 804px;
          height: 500px;
          background: rgba(1, 128, 240, 0.1);
          margin-bottom: 40px;

          .top {
            background-image: url("../assets/images/large-screen/title-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 56px;

            .title {
              font-size: 26px;
              font-weight: bold;
              color: #ffffff;
              padding: 9px 0px 11px 28px;
              white-space: nowrap;
            }

            .more {
              font-size: 18px;
              font-weight: 500;
              color: #78dfff;
              padding-right: 28px;
            }

            .active {
              color: #78dfff;
            }
          }

          .ql-top {
            margin: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .value {
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 18px;
              color: rgba(255, 255, 255, 0.85);
              line-height: 21px;
              text-align: left;
              font-style: normal;
              text-transform: none;

              span {
                font-family: DIN;
                font-weight: bold;
                font-size: 32px;
                color: #ffffff;
                line-height: 38px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-left: 16px;
              }
            }
          }

          .count {
            display: flex;
            margin: 28px 28px 10px 28px;

            .count-item {
              width: 140px;
              height: 94px;
              border: 1px dashed;
              display: flex;
              margin: -7px 28px;
              padding: 1px 0px;
              .icon {
                width: 56px;
                height: 56px;
                margin: 16px 8px 0px 8px;

                img {
                  width: 140px;
                  height: 94px;
                  padding: 4px 0px;
                  margin: -22px -9px;
                }
              }

              .info {
                margin-top: 16px;
                color: #ffffff;

                .name {
                  font-size: 16px;
                  font-weight: 500;
                  margin-bottom: 8px;
                  margin: 21px -12px;
                }

                .value {
                  font-size: 32px;
                  padding: 0px 0px;
                  margin: -60px -39px;
                  font-weight: bold;
                  padding: 55px 2px;
                }
              }
            }

            .bridge-image {
              width: 360px;
              height: 100px;

              img {
                width: 540px;
                height: 134px;
                border-radius: 0px 0px 0px 0px;
                border: 1px solid #0e56ac;
                padding: 0px 0px;
                margin: -7px;
                margin-left: 20px;
              }
            }
          }

          .work {
            font-family: "PingFang SC";
            font-weight: 500;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin: 20px;

            span {
              margin-left: 16px;
              font-family: "DIN";
              font-weight: bold;
              font-size: 32px;
              color: #ffffff;
              line-height: 38px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }

          .bridge-info {
            height: 54px;
            display: flex;
            flex-wrap: wrap;
            margin: 0px 28px 10px 28px;
            background: linear-gradient(
              90deg,
              rgba(120, 223, 255, 0.02) 1%,
              rgba(41, 191, 238, 0.31) 59%,
              rgba(120, 223, 255, 0) 100%
            );
            border: 1px solid;
            border-image: linear-gradient(
                360deg,
                rgba(120, 223, 255, 0),
                rgba(63, 207, 252, 0.81),
                rgba(120, 223, 255, 0)
              )
              1 1;

            .info-item {
              width: 48%;
              display: flex;
              justify-content: space-between;
              color: #fff;
              font-size: 16px;
              margin: 0 1%;

              .value {
                font-weight: bold;
              }
            }
          }

          .single-count {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 27px 28px 23px 28px;
            background-image: url("../assets/images/large-screen/count-bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .left {
              display: flex;
              align-items: center;

              .icon {
                width: 56px;
                height: 56px;
                margin: 16px 8px 16px 20px;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .name {
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
              }
            }

            .value {
              font-size: 36px;
              font-weight: bold;
              color: #ffffff;
              padding-right: 20px;
            }
          }

          .subtitle {
            height: 45px;
            background-image: url("../assets/images/large-screen/second-title-long.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-size: 24px;
            font-weight: 500;
            color: #ffffff;
            line-height: 45px;
            margin-left: 28px;
            width: 770px !important;
            text-indent: 40px;
            margin-top: 31px;
          }

          .sw {
            background-image: url("../assets/images/large-screen/second-title-long.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 20px;
            height: 45px;
            .value {
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 18px;
              color: rgba(255, 255, 255, 0.85);
              font-style: normal;
              text-transform: none;
              margin-right: 30px;
            }
          }

          .subtitle-small {
            font-family: TENGXZTB, TENGXZTB;
            font-weight: 400;
            font-size: 24px;
            color: #ffffff;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 40px;
          }

          .video-content {
            display: flex;
            margin: 20px;

            .video-count {
              .count-item {
                width: 166px;
                height: 195px;
                background: linear-gradient(
                  90deg,
                  rgba(120, 223, 255, 0.02) 1%,
                  rgba(41, 191, 238, 0.31) 59%,
                  rgba(120, 223, 255, 0) 100%
                );
                border: 1px solid;
                border-image: linear-gradient(
                    360deg,
                    rgba(120, 223, 255, 0),
                    rgba(63, 207, 252, 0.81),
                    rgba(120, 223, 255, 0)
                  )
                  1 1;

                img {
                  width: 58px;
                  height: 58px;
                  margin-top: 24px;
                  margin-left: 20px;
                }

                .name {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.85);
                  line-height: 21px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  margin-top: 20px;
                  margin-left: 20px;
                }

                .value {
                  font-family: DIN, DIN;
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                  line-height: 38px;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  margin-left: 20px;
                }
              }
            }

            .video-details {
              margin: 0 20px;
              width: 100%;
              .video-list {
                display: flex;
                justify-content: space-between;
              }

              .video {
                width: 584px;
                height: 358px;
                margin-top: 10px;
              }
            }
          }

          .notice {
            height: 122px;
            background: rgba(120, 223, 255, 0.1);
            box-shadow: inset 0px -1px 0px 0px #78dfff;
            margin: 18px 28px;

            .title {
              font-size: 20px;
              font-weight: 500;
              color: #ffffff;
              padding: 20px 20px 15px 20px;
            }

            .bottom {
              display: flex;
              justify-content: space-between;
              padding: 0 20px;
              font-size: 16px;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.6);
            }
          }

          .table {
            margin: 16px;
          }
        }
      }
    }
  }
}
//表格的样式
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: #fff;
}

// 你这样加，会影响全部的
// :deep(.el-table th) {
//   background: rgba(12, 42, 72, 0.9);
//   text-align: center;
// }

:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  border: 0px;
  color: #fff;
  font-size: 14px;
  font-weight: Normal;
  padding: 0;
  text-align: center;
}

/* 奇数行和偶数行的背景颜色 */
:deep(.el-table tr:nth-child(odd)) {
  background-color: rgba(120, 223, 255, 0.05); /* 奇数行背景色 */
}

:deep(.el-table tr:nth-child(even)) {
  background-color: rgba(120, 223, 255, 0.1); /* 偶数行背景色 */
}

// 修改高亮当前行颜色
:deep(.el-table tbody tr:hover > td) {
  background: #063570 !important;
}

// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent;
}

// 去掉表头下面的那一条线
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

// 表单样式
:deep(.el-form-item__label) {
  color: #06283e;
}

:deep(.el-input__inner) {
  color: #ffffff;
  background: transparent;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e inset;
}

:deep(.el-range-editor--small .el-range-separator) {
  color: #ffffff;
}

:deep(.el-input__inner::placeholder) {
  color: #ffffff;
}

:deep(.el-select .el-input .el-select__caret.el-icon) {
  color: #ffffff;
}

:deep(.el-date-editor .el-range__icon) {
  color: #ffffff;
}

:deep(.el-range-input::placeholder) {
  color: #ffffff;
}

:deep(.el-range-editor--small .el-range-input) {
  color: #ffffff;
}

:deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg) {
  color: #ffffff;
}

// 去除边框
// :deep(.el-select .el-input__wrapper) {
//   box-shadow: none !important;
// }
:deep(.el-checkbox) {
  font-weight: 400;
  --el-checkbox-font-size: 18px;
  // color: rgba(255,255,255,0.65);
  color: #fff;
}

:deep(.el-checkbox__inner) {
  background-color: #d8d8d8;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #78dfff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__inner::after) {
  box-sizing: content-box;
  content: "";
  border: 1px solid black;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before) {
  content: "";
  position: absolute;
  display: block;
  background-color: black;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
}

:deep(.el-select__wrapper) {
  background: #052b44;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(120, 223, 255, 0.4);
}

:deep(.el-select__placeholder) {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

:deep(.el-icon svg) {
  color: #78dfff;
}
#fourth-chart {
  background: url("../assets/images/pc/bg@2x.png");
  background-repeat: no-repeat;
  background-size: 198px 198px;
  background-position: 102px -8px;
}

#third-chart {
  background: url("../assets/images/pc/bg@2x.png");
  background-repeat: no-repeat;
  background-size: 197px 197px;
  background-position: 103px -8px;
}
.table {
  margin: -315px 146px;
  width: 782px;
  padding: 41px 1px;
  display: flex;
  position: absolute;
  height: 500px;
}
.unit {
  width: 31px;
  height: 28px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: 27px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  padding: 1px 23px;
}

// .large-screen {

// }
:deep(.el-table th.el-table__cell) {
  background: #144660 !important;
}
</style>
